<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>退款管理</title>
    <link rel="stylesheet" href="/rzwl/static/css/style.css">
    <link rel="stylesheet" href="/rzwl/components/tabbar/index.css">
    <link rel="stylesheet" href="/rzwl/refund/static/index.css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">  -->
</head>
<body>
    <div id="refund_app">
        <header class="header">
            <h1>退款管理</h1>
            <button @click="clearCacheAndReload" class="clear-cache-btn">清理缓存并刷新</button>
        </header>

        <main class="main-content">
            <p>[[ message ]]</p>

            <div v-if="orders.length > 0" class="order-list">
                <h2>所有已支付订单</h2>
                <div v-for="order in orders" :key="order.order_id" class="order-item">
                    <p><strong>订单号:</strong> [[ order.order_id ]]</p>
                    <p><strong>培训班:</strong> [[ order.training_class_name ]]</p>
                    <p><strong>支付金额:</strong> ¥[[ order.payment_amount ? order.payment_amount.toFixed(2) : '0.00' ]]</p>
                    <p><strong>支付时间:</strong> [[ order.payment_time ]]</p>
                    <p><strong>状态:</strong> [[ order.status ]]</p>
                    <p><strong>用户OpenID:</strong> [[ order.openid ]]</p>
                    <p><strong>联系电话:</strong> [[ order.phone ]]</p>
                    <button v-if="order.status === 'paid'" @click="initiateRefund(order.order_id)" class="refund-btn">发起退款</button>
                </div>
            </div>
            <p v-else>没有找到已支付订单。</p>
        </main>
    </div>

    <script src="/rzwl/static/vue@2.6.14/dist/vue.min.js"></script>
    <script src="/rzwl/static/js/axios.min.js"></script>
    <script src="/rzwl/components/tabbar/index.js"></script>
    <script src="/rzwl/refund/static/index.js"></script>
</body>
</html>
